import 'package:bxultimate/app/theme/app_theme.dart';
import 'package:bxultimate/app/theme/gaps.dart';
import 'package:bxultimate/resources/assets.dart';
import 'package:bxultimate/widgets/mk_load_image.dart';
import 'package:bxultimate/widgets/mk_page.dart';
import 'package:bxultimate/widgets/mk_scroll_view.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

import 'controller.dart';

class ExaminationResultPage extends StatefulWidget {
  const ExaminationResultPage({Key? key}) : super(key: key);

  @override
  State<ExaminationResultPage> createState() => _ExaminationResultPageState();
}

class _ExaminationResultPageState extends State<ExaminationResultPage> {
  final controller = Get.find<ExaminationResultController>();
  final state = Get.find<ExaminationResultController>().state;

  @override
  Widget build(BuildContext context) {
    return MkPage(
      bg: Assets.examinationResultBg,
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: TDNavBar(
          backgroundColor: Colors.transparent,
          title: '考试结果',
        ),
        body: MkScrollView(
          bottomButton: TDButton(
            text: '试卷解析',
            theme: TDButtonTheme.primary,
            isBlock: true,
            shape: TDButtonShape.circle,
            height: 48,
            onTap: controller.toANswerCardResult,
          ),
          children: [
            Gaps.vGap24,
            Obx(() => Row(
                  children: [
                    Gaps.hGap32,
                    Text("${state.result.score}",
                        style: TextStyle(fontSize: 60, color: Colors.white)),
                    Gaps.hGap12,
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          "分",
                          style: TextStyle(color: Colors.white),
                        ),
                        Gaps.vGap8,
                        Container(
                            padding: EdgeInsets.symmetric(
                                vertical: 2, horizontal: 4),
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(4),
                            ),
                            child: Text(
                              "总分${state.result.sumScore}分",
                              style: TextStyle(color: Color(0xFFFF8F6C)),
                            )),
                      ],
                    )
                  ],
                )),
            Gaps.vGap24,
            boxWrapper(Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Obx(() => _buildBoxItem(
                    Assets.examinationTime, "${state.result.ys}分钟", "用时")),
                Obx(() => _buildBoxItem(
                    Assets.examinationError, "${state.result.ctNum}道", "错题")),
              ],
            )),
            Gaps.vGap24,
            Obx(() => boxWrapper(Column(
              mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      '${state.result.examTitle}',
                      style:
                          TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                    ),
                    Gaps.vGap24,
                    Wrap(
                      alignment: WrapAlignment.start,
                      spacing: 14,
                      runSpacing: 20,
                      children: [
                        for (int i = 0; i < state.answerSheetList.length; i++)
                          Container(
                              width: 40,
                              height: 40,
                              decoration: BoxDecoration(
                                  border: Border.all(width: 0.5),
                                  color: state.answerSheetList[i].isTrue == -1
                                      ? Colors.red
                                      : Colors.greenAccent,
                                  borderRadius: BorderRadius.circular(50)),
                              child: Center(
                                child: Text(
                                  '${i + 1}',
                                  style: TextStyle(
                                    fontSize: 16,
                                      color: Colors.white,
                                      fontWeight: FontWeight.bold),
                                ),
                              )),
                      ],
                    )
                  ],
                )))
          ],
        ),
      ),
    );
  }

  Widget _buildBoxItem(icon, title, subTitle) {
    return Row(
      children: [
        MkLoadImage(
          icon,
          width: 30,
        ),
        Gaps.hGap12,
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('${title}',
                style: TextStyle(
                    color: Color(0xFFA35740),
                    fontSize: 18,
                    fontWeight: FontWeight.bold)),
            Text('${subTitle}'),
          ],
        )
      ],
    );
  }

  Widget boxWrapper(child) {
    return Container(
      width: double.infinity,
      padding: EdgeInsets.all(AppTheme.iDefaultPadding),
      margin: EdgeInsets.symmetric(horizontal: AppTheme.iDefaultPadding),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
      ),
      child: child,
    );
  }

  @override
  void dispose() {
    Get.delete<ExaminationResultController>();
    super.dispose();
  }
}
